<template>
  <div>
    <el-button
      size="small"
      icon="el-icon-printer"
      class="print-btn"
      @click="$print($refs.print, null)"
    >
      打印
    </el-button>
    <div class="user-car-pager" ref="print">
      <div class="title">中共文山州委办公室公务用车申请单</div>
      <div class="company">
        <span>
          局、馆、科、中心：{{ formData.departmentName || department_name }}
        </span>
        <span>
          {{ formData.create_time }}
        </span>
      </div>
      <table class="table-wrapper" cellspacing="0" cellpadding="0">
        <!-- 固定表头 -->
        <!-- 如果formData有值 -->
        <tr class="info-row">
          <td width="40%" align="center">用车事由、目的地、需要车型</td>
          <td width="" colspan="3">
            <span class="content" v-if="hasData">{{ formData.reason }}</span>
            <el-input v-else v-model="formData.reason" type="textarea" placeholder="请输入" />
          </td>
        </tr>
        <tr class="info-row">
          <td width="" align="center">预计用车时间、乘车地点</td>
          <td width="" colspan="3">
            <span class="content" v-if="hasData">{{ formData.timePlace }}</span>
            <el-input v-else v-model="formData.timePlace" type="textarea" placeholder="请输入" />
          </td>
        </tr>
        <tr class="info-row">
          <td width="" align="center">乘车人员姓名</td>
          <td width="" colspan="3">
            <span class="content" v-if="hasData">{{ formData.commuter }}</span>
            <el-input v-else v-model="formData.commuter" type="textarea" placeholder="请输入" />
          </td>
        </tr>
      </table>
      <table class="table-wrapper" cellspacing="0" cellpadding="0">
        <tr class="info-row driver">
          <td width="25%" align="center">驾驶员姓名</td>
          <td width="25%">
            <span class="content" v-if="hasData">{{ formData.jsy_name }}</span>
            <el-input v-else v-model="formData.jsy_name" placeholder="请输入" />
          </td>
          <td width="25%" align="center">联系人电话</td>
          <td width="25%">
            <span class="content" v-if="hasData">{{ formData.jsy_phone }}</span>
            <el-input
              v-else
              v-model="formData.jsy_phone"
              placeholder="请输入"
            />
          </td>
        </tr>
        <tr height="80">
          <td align="center" class="advice">
            <span class="name">审批领导：</span>
            <div v-html="getLeaderAdvice('审批领导')"></div>
          </td>
          <td align="center" class="advice">
            <span class="name">分管领导：</span>
            <div v-html="getLeaderAdvice('分管领导')"></div>
          </td>
          <td align="center" class="advice">
            <span class="name">中心负责人：</span>
            <div v-html="getLeaderAdvice('中心负责人')"></div>
          </td>
          <td align="center" class="advice">
            <span class="name">申请人：</span>
            <div>
              {{ formData.applyer || first_name }}
            </div>
          </td>
        </tr>
        <tr v-if="showAdviceInput && !queryData.isHand" class="situation">
          <td width="30" align="center">审批意见</td>
          <td colspan="12">
            <el-input
              type="textarea"
              :rows="2"
              v-model="comment"
              placeholder="填写意见"
            ></el-input>
          </td>
        </tr>
      </table>
    </div>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import { parseTime, previewFileAppendPath } from "@/utils/index.js";
export default {
  name: "UserCarPager",
  computed: {
    ...mapGetters(["id", "first_name", "department_name"]),
  },
  props: {
    pager: {
      type: Object,
      default: () => {},
    },
    queryData: {
      type: Object,
      default: () => ({}),
    },
    pointData: {
      type: Object,
      default: () => ({}),
    },
    showAdviceInput: {
      type: Boolean,
      default: false,
    },
  },
  watch: {
    pointData: {
      handler(data) {
        const { variables = {} } = this.queryData;
        const { fromData } = variables;
        if (fromData) {
          this.hasData = true;
        }
        this.formData = fromData || {};
      },
      immediate: true,
      deep: true
    },
  },
  data() {
    return {
      comment: "",
      hasData: false,
      formData: {
        create_time: parseTime(new Date(), "{y}年{m}月{d}日"),
        reason: "",
        timePlace: "",
        commuter: "",
        jsy_name: "",
        jsy_phone: "",
      },
    };
  },
  methods: {
    parseTime,
    getLeaderAdvice(leader) {
      const point = this.pointData[leader] || [];
      let adviceStr = ''
      if (point.length) {
        point.forEach(item => {
          const { message, userId, time } = item;
          const first_name = userId && userId.split("(")[0];
          adviceStr += `${message}（${first_name} ${parseTime(time, "{y}-{m}-{d} {h}:{i}")}）<br>`
        })
      }
      return adviceStr;
    },
  },
};
</script>

<style lang="scss">
.print-btn {
  position: absolute;
  right: 20px;
}
.user-car-pager {
  max-width: 800px;
  margin: 0 auto;
  .title {
    text-align: center;
    font-size: 30px;
    padding-top: 40px;
    margin: 0px auto 52px;
  }
  .company {
    margin-top: 34px;
    padding: 0 13px 4px 13px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 14px;
    .unit {
      display: flex;
      align-items: center;
      span {
        flex-basis: 218px;
      }
    }
    span {
      line-height: 14px;
    }
  }
  .content {
    display: inline-block;
    padding: 10px;
  }
  .info-row {
    height: 40px;
    &:last-child {
      td {
        border-bottom: none !important;
      }
    }
  }
  .advice {
    position: relative;
    padding-left: 17px;
    padding-top: 26px;
    text-align: left;
    vertical-align: top;
    .name {
      position: absolute;
      top: 6px;
      left: 16px;
      z-index: 99;
      line-height: 14px;
    }
    > div {
        line-height: 24px;
      }
  }
  .el-input__inner {
    background-color: transparent;
    border-radius: 0;
  }
}
</style>
<style lang="scss">
.user-car-pager {
  table td {
    // border-color: red;
    border: 1px solid;
  }
  .table-wrapper {
    width: 100%;
    font-size: 14px;
    border-collapse: collapse;

    td {
      span {
        // display: inline-block;
        // margin-left: 6px;
        // color: #000;
        // font-weight: normal;
        // word-break: break-all;
      }
    }
  }
}
</style>